<template>
  <div class="addDiary">
    <div class="addDiary-head">
      <div class="head-wang">

      </div>
    </div>
    <div class="addDiary-main">
      <ul>
        <li class="imgLi" v-for="(item,index) in imgLists" :key="index">
          <div>
            <img :src="item.img" alt="">
          </div>
        </li>
        <li class="addImgli">
          <div>
            <label class="imgLabel" for="upImg">
              <img src="/static/img/add.png" alt="">
            </label>
            <input id="upImg" type="file">
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import { mapActions, mapState } from "vuex";
import { Toast } from "mint-ui";
export default {
  data() {
    return {
      imgLists: [{ img: "/static/img/向右未点击@2x.png" }]
    };
  },
  filters: {
    // 返回日期格式化
    timeFun(date) {
      if (date == "") {
        return;
      } else {
        var y, m, d, h, f, s;
        var t = new Date(date);
        y = t.getFullYear();
        m = t.getMonth() + 1;
        d = t.getDate();
        h = t.getHours();
        f = t.getMinutes();
        return (
          y +
          "." +
          (m < 10 ? "0" + m : m) +
          "." +
          (d < 10 ? "0" + d : d) +
          "  " +
          (h < 10 ? "0" + h : h) +
          ":" +
          (f < 10 ? "0" + f : f)
        );
      }
    },
    numFun(val) {
      if (val == 0) {
        return val;
      } else {
        if (val) {
          return val;
        } else {
          return 0;
        }
      }
    },
    contentFun(val) {
      return val;
      //   if (val) {
      //     if (val.length > 30) {
      //       val = val.substring(0, 30);
      //       val = val + "...";
      //       return val;
      //     } else {
      //       return val;
      //     }
      //   } else {
      //     return "无";
      //   }
    },
    imgFun(val) {
      if (val) {
        return val;
      } else {
        return "/static/img/ren.png";
      }
    },
    strFun(val) {
      if (val) {
        return val;
      } else {
        return "无";
      }
    }
  },
  created: function() {
    var self = this;
  },
  beforeDestroy: function() {},
  watch: {},
  methods: {
    ...mapActions([""])
  }
};
</script>
<style scoped>
.addDiary-main ul {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
  margin-top: 0.5rem;
}
.addImgli {
  width: 33%;
  height: 7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  border-radius: 4px;
}
.imgLabel {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
#upImg {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;

  display: none;
  opacity: 0;
}
.addImgli > div {
  width: 7rem;
  height: 7rem;
  border: 1px solid #ccc;
  border-radius: 5px;

  position: relative;
}
.imgLi > div {
  width: 7rem;
  height: 7rem;
  border: 1px solid #ccc;
  border-radius: 5px;
}
.imgLi > div img {
  width: 100%;
  height: 100%;
}
.imgLi {
  width: 33%;
  height: 7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}
.head-wang {
  width: 95%;
  margin: 0 auto;
  border: 1px solid #ccc;
  min-height: 26rem;
}
.addDiary-head {
  border-top: 1px solid #f7f7f7;
  min-height: 27rem;
  width: 100%;
  background-color: #fff;
}
.addDiary-main {
  min-height: 7rem;
  width: 100%;
  background-color: #fff;
  overflow: hidden;
}

.addDiary {
  background-color: #f7f7f7 !important;
  overflow-x: hidden;
  height: 100%;
  overflow-y: scroll;
  width: 100%;
}
</style>